<template>
  <div class="hello">
    <ul v-for="product in _productList">
      <li @click="chooseProduct(product)">
        货道：{{product.serialNum}}
        <img :src="product.imageUrl" style="width: 300px" alt="">
        价格：{{product.price}}
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    name: 'ProductList',
    data () {
        return {
            message: 'Hello Vue.js!',
            productList: [],
            socket: null,
            machineID:''
        }
    },
    sockets: {
        connect () {
            console.log('socket connected')
        },
        pushImage (data) {
            this.productList = data;
            this.$store.commit('getProductList', this.productList);
        },
    },
    computed: {
        _productList: {
            get() {
                return this.$store.state.productList;
            }
        }
    },

    created() {

    },
    methods: {
        chooseProduct (product) {
            this.$router.push({
              name: 'ProductDetail',
              params: {
                  name: product.name,
                  imageUrl: product.imageUrl,
                  price: product.price,
                  serialNum: product.serialNum,
                  qrImageUrl: product.qrImageUrl
              }
            })
        }

    },
  }
  </script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul {
  list-style-type: none;
  padding: 0;
}
li {
  float: left;
}

</style>
